<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <style>
        a {
            font-size: larger;
        }
        
        button {
            background-color: darkcyan;
        }
        
        
        #parent {
            width: 200px;
            height: 500px;
            background-color: cadetblue;
        }
        
        #child {
            width: 100px;
            height: 25px;
            background-color: darkkhaki;
        }
    </style>
</head>

<body>
    <div id="parent">
        茶水饮品
        <div id="child">
            饮料
        </div>
    
        <div>
            <ul>
                <button>
                    <li>冰红茶</li>
                </button>
                <br>
                <button>
                    <li>水溶C</li>
                </button>
                <br>
                <button>
                    <li>百事可乐</li>
                </button>
                <br>
                <button>
                    <li>雪碧</li>
                </button>
                <br>
            </ul>
        </div>
        <button>
            <span><a href="https://www.baidu.com/">这个页面坏了，请不要点他 </a></span>
        </button>
        <button>
            <span><a href="https://www.baidu.com/">点我！！！！！！</a></span>
        </button>
    </div>
        <script>
            window.addEventListener("load", () => {
            let parent = document.getElementById("parent")
            let child = document.getElementById("child")

            child.addEventListener("click", (event) => {
                event.stopPropagation() 
                console.log("child")
            })
            parent.addEventListener("click", () => {
                    console.log("parent")
                })
            document.querySelectorAll("ul")[0].addEventListener("click", (event) => {
                console.log(event.currentTarget)
                console.log(event.target.innerText)
            })
            document.querySelectorAll("ul")[0].addEventListener("click", (event) => {
                console.log("这是捕获阶段")
            }, true)

            document.getElementsByTagName("a")[0].addEventListener("click", (event) => {
                event.preventDefault()
                console.log("正在点击链接尝试跳转中")
            })

            document.querySelectorAll("ul")[0].addEventListener("click", (event) => {
                event.target.append("不要乱点！！！")
            })
                    console.log(document.documentElement)
                    console.log(document.body)
                    window.alert("饮品点单界面")
                })
        </script>
</body>

</html>